<script lang="ts">
  import {
    EDGE_TYPE_BEZIER,
    EDGE_TYPE_SMOOTH_STEP,
    EDGE_TYPE_STEP,
    EDGE_TYPE_STRAIGHT,
    type DrawEdgeInfo,
  } from "$lib/api/board/board_draw";
  import {
    getBezierPath,
    getSmoothStepPath,
    BaseEdge,
    type EdgeProps,
    EdgeLabelRenderer,
    getStraightPath,
  } from "@xyflow/svelte";
  import { drawStore } from "../store.svelte";

  const props: EdgeProps = $props();

  const edgeData = $derived(props.data as DrawEdgeInfo);

  let edgePath = $state("");
  let labelX = $state(0);
  let labelY = $state(0);

  const relateSelNode = $derived(
    props.selected ||
      drawStore.selectNodeIdList.includes(
        (props.data as DrawEdgeInfo).edge_key.from_node_id,
      ) ||
      drawStore.selectNodeIdList.includes(
        (props.data as DrawEdgeInfo).edge_key.to_node_id,
      ) ||
      drawStore.hoverNodeId ==
        (props.data as DrawEdgeInfo).edge_key.from_node_id ||
      drawStore.hoverNodeId == (props.data as DrawEdgeInfo).edge_key.to_node_id,
  );

  $effect(() => {
    if (edgeData.basic_info.edge_type == EDGE_TYPE_BEZIER) {
      const [tmpEdgePath, tmpLabelX, tmpLabelY] = getBezierPath({
        sourceX: props.sourceX,
        sourceY: props.sourceY,
        sourcePosition: props.sourcePosition,
        targetX: props.targetX,
        targetY: props.targetY,
        targetPosition: props.targetPosition,
      });
      edgePath = tmpEdgePath;
      labelX = tmpLabelX;
      labelY = tmpLabelY;
    } else if (edgeData.basic_info.edge_type == EDGE_TYPE_SMOOTH_STEP) {
      const [tmpEdgePath, tmpLabelX, tmpLabelY] = getSmoothStepPath({
        sourceX: props.sourceX,
        sourceY: props.sourceY,
        sourcePosition: props.sourcePosition,
        targetX: props.targetX,
        targetY: props.targetY,
        targetPosition: props.targetPosition,
      });
      edgePath = tmpEdgePath;
      labelX = tmpLabelX;
      labelY = tmpLabelY;
    } else if (edgeData.basic_info.edge_type == EDGE_TYPE_STEP) {
      const [tmpEdgePath, tmpLabelX, tmpLabelY] = getSmoothStepPath({
        sourceX: props.sourceX,
        sourceY: props.sourceY,
        sourcePosition: props.sourcePosition,
        targetX: props.targetX,
        targetY: props.targetY,
        targetPosition: props.targetPosition,
        borderRadius: 0,
        offset: 0,
      });
      edgePath = tmpEdgePath;
      labelX = tmpLabelX;
      labelY = tmpLabelY;
    } else if (edgeData.basic_info.edge_type == EDGE_TYPE_STRAIGHT) {
      const [tmpEdgePath, tmpLabelX, tmpLabelY] = getStraightPath({
        sourceX: props.sourceX,
        sourceY: props.sourceY,
        targetX: props.targetX,
        targetY: props.targetY,
      });
      edgePath = tmpEdgePath;
      labelX = tmpLabelX;
      labelY = tmpLabelY;
    }
  });

  $effect(() => {
    if (props.selected) {
      setTimeout(() => {
        drawStore.addSelectEdgeKey(edgeData.edge_key);
      }, 100);
    } else {
      drawStore.removeSelectEdgeKey(edgeData.edge_key);
    }
  });
</script>

<BaseEdge
  path={edgePath}
  markerStart={props.markerStart}
  markerEnd={props.markerEnd}
  style={`stroke-width: ${relateSelNode ? 3 : edgeData.basic_info.stroke_width}px;stroke: ${relateSelNode ? "var(--color-primary-900)" : edgeData.basic_info.color};`}
/>
{#if edgeData.basic_info.llm_link == false}
  <EdgeLabelRenderer>
    <div
      class="absolute nodrag nopan pointer-events-auto bg-surface-100-900 flex gap-2 items-center z-50"
      style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
    >
      {edgeData.basic_info.label}
    </div>
  </EdgeLabelRenderer>
{/if}
